<script setup>
import { ref } from 'vue';

const props = defineProps({
  category: {
    type: String,
    required: true
  },
  index: {
    type: Number,
    required: true
  }
});

const emit = defineEmits(['click', 'hover-change']);

const handleClick = () => {
  emit('click', { category: props.category, source: 'category-view' });
};

const handleMouseOver = () => {
  emit('hover-change', props.index);
};

const handleMouseLeave = () => {
  emit('hover-change', -1);
};
</script>

<template>
  <div
    class="category-card"
    @mouseover="handleMouseOver"
    @mouseleave="handleMouseLeave"
    @click="handleClick"
  >
    <div class="card-inner" :class="{ 'hover-active': props.index === hoverIndex }">
      <span class="tag-icon">🔖</span>
      <span class="category-name">{{ category }}</span>
      <div class="hover-effect"></div>
    </div>
  </div>
</template>

<style scoped>
.category-card {
  perspective: 1000px;
  cursor: pointer;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 120px;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.hover-active {
  box-shadow: 0 8px 15px var(--hover-shadow);
}

.category-card:hover .card-inner {
  transform: translateY(-5px);
}

.tag-icon {
  position: absolute;
  left: 1rem;
  top: 1rem;
  font-size: 1.8rem;
  color: #42b883;
  z-index: 2;
}

.category-name {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-color);
  z-index: 2;
}

.hover-effect {
  position: absolute;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    rgba(66, 184, 131, 0.1),
    rgba(52, 73, 94, 0.1)
  );
  top: -50%;
  left: -50%;
  transform: rotate(45deg);
  transition: all 0.5s;
  opacity: 0;
}

.hover-active .hover-effect {
  opacity: 1;
  animation: shine 1.5s;
}

@keyframes shine {
  0% {
    transform: rotate(45deg) translateX(-100%);
  }
  100% {
    transform: rotate(45deg) translateX(100%);
  }
}

@media (max-width: 768px) {
  .card-inner {
    height: 100px;
  }
  
  .category-name {
    font-size: 1rem;
  }
}
</style>